<template>
  <div class="userMsg">
      <header class="top">
      <span @click="back">返回</span>
      <span v-text="Toptitle"></span>
    </header>
    <van-cell title="头像">
        <template #right-icon>
            <img :src="'https://elm.cangdu.org/img/'+userLoginMsg.avatar" @click="updateImg" alt="" class="topImg">
  </template>
    </van-cell>
    <van-cell title="用户名" is-link :value="userLoginMsg.username" />
    <van-cell title="收货地址" is-link to="/my/takeOver" />
    <van-cell title="重置密码" is-link to="/reset" />
     <button @click="loginout" class="btn">退出登陆</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "userMsg",
  data(){
      return{
          Toptitle:'账户信息',
      }
  },
  created(){
      console.log(this.userLoginMsg)
  },
  methods:{
           back() {
      this.$router.back();
    },
    //修改头像
    updateImg(){
        let api=this.eleUrl.updataImg;
        this.$http({
            url:api,
            method:'post'
        }).then((res)=>{
            console.log(api)
            console.log(res)
        })
    },
    // 退出登陆
    loginout(){
      this.$store.commit('getUserLoginMsg','')
      this.$router.push({
        name:'my'
      })
    }
  },
    computed: {
    ...mapState(["eleUrl", "userLoginMsg"]),
  },
};
</script>

<style scoped>
.userMsg {
  font-size: 0.15rem;
}
.top {
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.top > span {
  color: white;
  line-height: 0.4rem;
  margin-left: 0.2rem;
}
.top > span:nth-child(2) {
  margin-left: 1.2rem;
  font-weight: bold;
}
.topImg{
    width: .3rem;
}
/* 退出登陆 */
.btn {
  width: 96%;
  height: 0.4rem;
  display: block;
  margin: 0 auto;
  border: none;
  color: white;
  font-size: 0.16rem;
  background-color: #67d96a;
  border-radius: 5px;
}
</style>